<script setup>
import { getCategoryFilterAPI, getSubCategoryAPI } from '@/api/category'

import { ref, watch } from 'vue'

import { useRoute } from 'vue-router'
import GoodsItem from '../component/GoodsItem.vue'
// 获取面包屑导航数据
const route = useRoute()
const categoryData = ref({})
const getCategoryData = async () => {
  // 渲染品牌
  const res = await getCategoryFilterAPI(route.params.id)
  res.data.result.brands.unshift({ id: null, name: '全部' })
  res.data.result.brands.forEach(item => {
    item.selected = false
    if (item.id === null) {
      item.selected = true
    }
  })
  // 渲染其他属性
  res.data.result.saleProperties.forEach(item => {
    item.properties.unshift({ id: null, name: '全部' })
    item.properties.forEach(item2 => {
      item2.selected = false
      if (item2.id === null) {
        item2.selected = true
      }
    })
  })
  categoryData.value = res.data.result
}
getCategoryData()
watch(
  () => route.params.id,
  () => {
    getCategoryData()
  },
  { immediate: true }
)
// 获取商品列表
const goodList = ref([])
const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: '',
  sortMethod: 'desc',
  inventory: false,
  onlyDiscount: false
})
const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value)

  goodList.value = res.data.result.items
}
// 监听路由变化
watch(
  () => route.params.id,
  newId => {
    reqData.value.categoryId = newId
    getGoodList()
  },
  {
    immediate: true
  }
)

// 加载更多
const disabled = ref(false)
const load = async () => {
  // 获取下一页数据
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)

  // 数据拼接
  goodList.value = [...goodList.value, ...res.data.result.items]
  if (res.result.items.length === 0) {
    disabled.value = true
  }
}

//标签选择
const isSelect = (item, arr) => {
  if (item.selected) {
    item.selected = false
  } else {
    arr.forEach(item => {
      item.selected = false
    })
    item.selected = true
  }
}

//排序方法
const sortGoods = (sortBy, order) => {
  reqData.value.sortField = sortBy
  reqData.value.sortMethod = order
  reqData.value.page = 1
  getGoodList()
}

const checked3 = ref(false)
const checked4 = ref(false)

//显示是否有库存
const filterByInventory = () => {
  reqData.value.inventory = !checked3.value
  reqData.value.page = 1
  // console.log('库存')
  getGoodList()
}

//是否优惠
const filterByDiscount = () => {
  reqData.value.onlyDiscount = !checked4.value
  reqData.value.page = 1
  // console.log('优惠')
  getGoodList()
}
</script>

<template>
  <div class="container">
    <!-- 面包 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/${categoryData.parentId}` }">{{
          categoryData.parentName
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 筛选容器 -->
    <div class="category-container">
      <div class="category">
        <div class="category-head">品牌：</div>
        <div class="category-body">
          <a
            href="javascript:;"
            v-for="item in categoryData.brands"
            :key="item.id"
            :class="{ select: item.selected }"
            @click="isSelect(item, categoryData.brands)"
          >
            {{ item.name }}
          </a>
        </div>
      </div>
      <div class="category" v-for="item in categoryData.saleProperties" :key="item.id">
        <div class="category-head">{{ item.name + ':' }}</div>
        <div class="category-body">
          <a
            href="javascript:;"
            v-for="item2 in item.properties"
            :key="item2.id"
            :class="{ select: item2.selected }"
            @click="isSelect(item2, item.properties)"
            >{{ item2.name }}</a
          >
        </div>
      </div>
    </div>
    <!-- 列表容器 -->
    <div>
      <div class="sub-container">
        <div class="check-good">
          <el-button v-model="reqData.sortField" name="DefaultSorting" @click="sortGoods()"
            >默认排序</el-button
          >
          <el-button
            v-model="reqData.sortField"
            name="LatestProducts"
            @click="sortGoods('publishTime', 'desc')"
            >最新商品</el-button
          >
          <el-button
            v-model="reqData.sortField"
            name="MostPopular"
            @click="sortGoods('orderNum', 'desc')"
            >最高人气</el-button
          >
          <el-button
            v-model="reqData.sortField"
            name="Mostcomments"
            @click="sortGoods('evaluateNum', 'desc')"
            >评论最多</el-button
          >
          <el-button
            v-model="reqData.sortField"
            name="TimeSorting"
            @click="sortGoods('price', 'asc')"
            >最低价格</el-button
          >
          <el-button
            v-model="reqData.sortField"
            name="TimeSorting"
            @click="sortGoods('price', 'desc')"
            >最高价格</el-button
          >

          <el-checkbox
            v-model="checked3"
            label="仅显示有货商品"
            size="large"
            @click="filterByInventory"
          />
          <el-checkbox
            v-model="checked4"
            label="仅显示特惠商品"
            size="large"
            @click="filterByDiscount"
          />
        </div>
        <!-- 列表展示 -->
        <div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
          <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id"></GoodsItem>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;

  .bread-container {
    padding: 25px 0;
    width: 1240px;
  }
  .sub-container {
    width: 1240px;
    padding: 25px;
    margin: 25px;
    background-color: #fff;
    .check-good {
      background-color: #fff;
      width: 1240px;
      margin-bottom: 20px;

      .el-button:focus {
        background-color: rgb(39, 186, 155);
        border-color: rgb(39, 186, 155);
        color: white;
        &:hover {
          color: white;
        }
      }
      //el-checkbox样式修改
      ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
        color: rgb(39, 186, 155) !important;
      }
      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: rgb(39, 186, 155) !important;
      }
      .el-checkbox {
        left: 360px;
      }
    }
    .body {
      display: flex;
      flex-wrap: wrap;
      width: 1240px;
      margin: 20px;
      cursor: pointer;
      background-color: #fff;
      justify-content: flex-start;
    }
  }

  .category-container {
    width: 1240px;
    background-color: #fff;
    display: inline-block;
    line-height: 40px;
    padding: 25px;

    .category-head {
      text-align: left;
      float: left;
      width: 80px;
      color: #999;
    }
    .category-body {
      float: left;
      width: 1110px;
      a {
        text-decoration: none;
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        color: #333;
        white-space: nowrap;
        max-width: 100px;
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 使用省略号替换溢出的文本 */

        &:hover {
          color: rgb(39, 186, 155);
        }
      }
      .select {
        color: rgb(39, 186, 155);
      }
    }
  }
}
</style>
